{% extends "base.html" %}

{% block title %}个人中心 - {{ app_name }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8 mx-auto">
        <!-- 页面标题 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>
                <i class="fas fa-user-cog me-2"></i>
                个人中心
            </h2>
            <a href="/" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>返回首页
            </a>
        </div>

        <!-- 个人信息卡片 -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-user me-2"></i>
                    个人信息
                </h5>
            </div>
            <div class="card-body">
                <form id="profileForm">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="username" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="username" name="username" value="{{ user.username }}" readonly>
                            <div class="form-text">用户名不可修改</div>
                        </div>
                        <div class="col-md-6">
                            <label for="role" class="form-label">用户角色</label>
                            <input type="text" class="form-control" id="role" value="{{ '管理员' if user.role == 'admin' else '普通用户' }}" readonly>
                        </div>
                        <div class="col-md-6">
                            <label for="phone" class="form-label">手机号</label>
                            <input type="tel" class="form-control" id="phone" name="phone" value="{{ user.phone or '' }}" placeholder="请输入手机号">
                        </div>
                        <div class="col-md-6">
                            <label for="email" class="form-label">邮箱地址</label>
                            <input type="email" class="form-control" id="email" name="email" value="{{ user.email or '' }}" placeholder="请输入邮箱地址">
                        </div>
                        <div class="col-12">
                            <label for="created_at" class="form-label">注册时间</label>
                            <input type="text" class="form-control" id="created_at" value="{{ user.created_at }}" readonly>
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-2"></i>
                            保存修改
                        </button>
                        <button type="button" class="btn btn-outline-secondary ms-2" onclick="resetForm()">
                            <i class="fas fa-undo me-2"></i>
                            重置
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 修改密码卡片 -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0">
                    <i class="fas fa-key me-2"></i>
                    修改密码
                </h5>
            </div>
            <div class="card-body">
                <form id="passwordForm">
                    <div class="row g-3">
                        <div class="col-12">
                            <label for="currentPassword" class="form-label">当前密码</label>
                            <div class="input-group">
                                <input type="password" class="form-control" id="currentPassword" name="current_password" required>
                                <button class="btn btn-outline-secondary" type="button" onclick="togglePasswordVisibility('currentPassword')">
                                    <i class="fas fa-eye" id="currentPasswordIcon"></i>
                                </button>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <label for="newPassword" class="form-label">新密码</label>
                            <div class="input-group">
                                <input type="password" class="form-control" id="newPassword" name="new_password" required>
                                <button class="btn btn-outline-secondary" type="button" onclick="togglePasswordVisibility('newPassword')">
                                    <i class="fas fa-eye" id="newPasswordIcon"></i>
                                </button>
                            </div>
                            <div class="form-text">密码长度至少6个字符</div>
                        </div>
                        <div class="col-md-6">
                            <label for="confirmPassword" class="form-label">确认新密码</label>
                            <div class="input-group">
                                <input type="password" class="form-control" id="confirmPassword" name="confirm_password" required>
                                <button class="btn btn-outline-secondary" type="button" onclick="togglePasswordVisibility('confirmPassword')">
                                    <i class="fas fa-eye" id="confirmPasswordIcon"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <button type="submit" class="btn btn-warning">
                            <i class="fas fa-key me-2"></i>
                            修改密码
                        </button>
                        <button type="button" class="btn btn-outline-secondary ms-2" onclick="resetPasswordForm()">
                            <i class="fas fa-undo me-2"></i>
                            重置
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 账户统计卡片 -->
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0">
                    <i class="fas fa-chart-bar me-2"></i>
                    账户统计
                </h5>
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-md-4">
                        <div class="border-end">
                            <h3 class="text-primary mb-1" id="passwordCount">-</h3>
                            <small class="text-muted">密码记录</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="border-end">
                            <h3 class="text-success mb-1" id="shareCount">-</h3>
                            <small class="text-muted">分享记录</small>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <h3 class="text-info mb-1" id="loginDays">-</h3>
                        <small class="text-muted">注册天数</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    loadUserStats();
    
    // 个人信息表单提交
    $('#profileForm').on('submit', function(e) {
        e.preventDefault();
        updateProfile();
    });
    
    // 密码修改表单提交
    $('#passwordForm').on('submit', function(e) {
        e.preventDefault();
        changePassword();
    });
});

function loadUserStats() {
    $.ajax({
        url: '/api/profile/stats',
        method: 'GET',
        success: function(response) {
            $('#passwordCount').text(response.password_count);
            $('#shareCount').text(response.share_count);
            $('#loginDays').text(response.login_days);
        },
        error: function(xhr) {
            console.error('加载统计信息失败:', xhr);
        }
    });
}

function updateProfile() {
    const formData = new FormData($('#profileForm')[0]);
    
    $.ajax({
        url: '/api/profile',
        method: 'PUT',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            if (typeof App !== 'undefined' && App.Utils && App.Utils.showAlert) {
                App.Utils.showAlert(response.message, 'success');
            } else {
                alert(response.message);
            }
        },
        error: function(xhr) {
            const error = xhr.responseJSON?.detail || '更新个人信息失败，请稍后重新尝试！';
            if (typeof App !== 'undefined' && App.Utils && App.Utils.showAlert) {
                App.Utils.showAlert(error, 'error');
            } else {
                alert(error);
            }
        }
    });
}

function changePassword() {
    const newPassword = $('#newPassword').val();
    const confirmPassword = $('#confirmPassword').val();
    
    if (newPassword !== confirmPassword) {
        if (typeof App !== 'undefined' && App.Utils && App.Utils.showAlert) {
            App.Utils.showAlert('两次输入的新密码不一致', 'error');
        } else {
            alert('两次输入的新密码不一致');
        }
        return;
    }
    
    if (newPassword.length < 6) {
        if (typeof App !== 'undefined' && App.Utils && App.Utils.showAlert) {
            App.Utils.showAlert('新密码长度至少6个字符', 'error');
        } else {
            alert('新密码长度至少6个字符');
        }
        return;
    }
    
    const formData = new FormData($('#passwordForm')[0]);
    
    $.ajax({
        url: '/api/profile/password',
        method: 'PUT',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            if (typeof App !== 'undefined' && App.Utils && App.Utils.showAlert) {
                App.Utils.showAlert(response.message, 'success');
            } else {
                alert(response.message);
            }
            $('#passwordForm')[0].reset();
        },
        error: function(xhr) {
            const error = xhr.responseJSON?.detail || '修改密码失败,请检查输入是否正确';
            if (typeof App !== 'undefined' && App.Utils && App.Utils.showAlert) {
                App.Utils.showAlert(error, 'error');
            } else {
                alert(error);
            }
        }
    });
}

function togglePasswordVisibility(fieldId) {
    const field = document.getElementById(fieldId);
    const icon = document.getElementById(fieldId + 'Icon');
    
    if (field.type === 'password') {
        field.type = 'text';
        icon.className = 'fas fa-eye-slash';
    } else {
        field.type = 'password';
        icon.className = 'fas fa-eye';
    }
}

function resetForm() {
    $('#profileForm')[0].reset();
    // 重新加载原始数据
    location.reload();
}

function resetPasswordForm() {
    $('#passwordForm')[0].reset();
}
</script>
{% endblock %}

{% block extra_css %}
<style>
.card {
    transition: transform 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
}

.border-end {
    border-right: 1px solid #dee2e6 !important;
}

@media (max-width: 768px) {
    .border-end {
        border-right: none !important;
        border-bottom: 1px solid #dee2e6 !important;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }
}
</style>
{% endblock %}